<template>
    <div class="private-content">
        <div class="dhJzOy">
            <div class="w1200">
                <div class="private-header">
                    <div class="private-header-type">便捷·安全·省心</div>
                    <div class="private-header-title">助力提升驾校综合竞争力</div>
                    <div class="private-header-desc">多端联动 一站信息互通 实现“教管学”一体化平台</div>
                    <div class="private-button">
                        <div class="download-button" @click="showConsult = true">立即咨询</div>
                        <div class="buy-button" @click="toFreeSignup">免费试用</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cpbIhp">
            <div class="w1200">
                <h2 class="ad-title">5大核心场景</h2>
                <div class="deploy">
                    <div v-for="(item, index) in dataList" :key="index" class="deploy-item">
                        <img :src="item.icon" alt="" class="icon-img">
                        <div class="deploy-title">
                            {{ item.title }}
                        </div>
                        <div class="deploy-desc">
                            {{ item.content }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w1200">
            <div class="advantage-detail">
                <div class="advantage-item">
                    <div class="advantage-item-img">
                        <img src="https://image.lutongjiakao.com/system/da4ce0d71663415a985375ad4f534db8.png" alt="">
                    </div>
                    <div class="advantage-item-content">
                        <div class="advantage-item-title">
                            全渠道多终端覆盖，<span>UI界面自定义</span>
                        </div>
                        <div class="advantage-item-remark">
                            支持微信公众号、微信小程序、抖音小程序、H5、APP、PC端等多渠道覆盖，支持一个账号信息全面互通
                        </div>
                        <div class="advantage-box">
                            <div class="advantage-box-item">
                                微信公众号
                            </div>
                            <div class="advantage-box-item">
                                微信小程序
                            </div>
                            <div class="advantage-box-item">
                                移动端H5
                            </div>
                            <div class="advantage-box-item">
                                windows学员端
                            </div>
                        </div>
                        <div class="advantage-type">
                            <div v-for="value in advantageList" class="flex flex-column flex-align-center">
                                <div class="advantage-img">
                                    <img :src="value.img" alt=""></img>
                                </div>
                                <div class="advantage-desc">
                                    {{ value.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="advantage-item">
                    <div class="advantage-item-content">
                        <div class="advantage-item-title">
                            数字化运营管理，<span>全面赋能驾校降本增效</span>
                        </div>
                        <div class="advantage-item-remark">
                            驾校场地、人员、车辆等资产一体化管理，助力提升驾校综合竞争力
                        </div>
                        <div class="advantage-box">
                            <div class="advantage-box-item">
                                驾校信息管理
                            </div>
                            <div class="advantage-box-item">
                                班型管理
                            </div>
                            <div class="advantage-box-item">
                                学员管理
                            </div>
                            <div class="advantage-box-item">
                                财务管理
                            </div>
                        </div>
                        <div class="advantage-type">
                            <div v-for="value in operationList" class="flex flex-column flex-align-center">
                                <div class="advantage-img">
                                    <img :src="value.img" alt=""></img>
                                </div>
                                <div class="advantage-desc">
                                    {{ value.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="advantage-item-img">
                        <img src="https://image.lutongjiakao.com/system/6f067d5a8a204317b0fb98ac1e6fe753.png" alt="">
                    </div>
                </div>
                <div class="advantage-item">
                    <div class="advantage-item-img">
                        <img src="https://image.lutongjiakao.com/system/d4dc0107b9ff488d9c4952d172eb6e7b.png" alt="">
                    </div>
                    <div class="advantage-item-content">
                        <div class="advantage-item-title">
                            丰富的营销玩法，<span>线上线下场景打通</span>
                        </div>
                        <div class="advantage-item-remark">
                            打破传统驾校束缚，实现高效拉新，围绕场景需求，定期更新维护，快速迭代升级产品
                        </div>
                        <div class="advantage-box">
                            <div class="advantage-box-item">
                                会员VIP
                            </div>
                            <div class="advantage-box-item">
                                分销推广
                            </div>
                            <div class="advantage-box-item">
                                秒杀活动
                            </div>
                            <div class="advantage-box-item">
                                课程直播
                            </div>
                        </div>
                        <div class="advantage-type">
                            <div v-for="value in marketingList" class="flex flex-column flex-align-center">
                                <div class="advantage-img">
                                    <img :src="value.img" alt=""></img>
                                </div>
                                <div class="advantage-desc">
                                    {{ value.desc }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="discover">
            <div class="w1200">
                <h2 class="ad-title">我们的优势</h2>
                <div class="features-section">
                    <div class="features-grid">
                        <div v-for="feature in featuresList" :key="feature.id" class="feature-card">
                            <div class="feature-icon">
                                <!-- <el-icon>
                                    <component :is="feature.icon" />
                                </el-icon> -->
                                <img :src="feature.icon" alt="">
                            </div>
                            <h4 class="feature-title">{{ feature.title }}</h4>
                            <p class="feature-desc">{{ feature.description }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="service">
            <div class="w1200">
                <h2 class="ad-title">为企业提供全周期一条龙服务</h2>
                <div class="service-steps">
                    <template v-for="(step, idx) in serviceSteps" :key="idx">
                        <div class="step-card">
                            <img :src="step.icon" alt="" class="step-icon">
                            <div class="step-title"><span class="step-no">{{ step.no }}</span> {{ step.title }}</div>
                            <div class="step-desc">{{ step.desc }}</div>
                        </div>
                        <div v-if="idx < serviceSteps.length - 1" class="step-arrow">
                            <img src="https://image.lutongjiakao.com/system/7e6882a457e5466cb9786a654befe74d.png"
                                alt="">
                        </div>
                    </template>
                </div>
                <div class="service-cta">
                    <img class="qrcode" src="https://image.lutongjiakao.com/system/ffa8ebce3f1e4d5b868d73d87854c426.png"
                        alt="咨询二维码">
                    <button class="consult-btn" @click="showConsult = true">立即咨询</button>
                </div>
            </div>
        </div>
        <div class="privatization">
            <div class="deploy-bg"></div>
            <div class="privatization-content">
                <div class="w1200">
                    <h2 class="ad-title">系统架构及专享服务权益</h2>
                    <div class="ad-desc">致力于提供行业领先的驾培解决方案，最大程度满足客户的个性化需求</div>
                    <div class="privatization-steps">
                        <div v-for="(item, index) in deployList" :key="index" class="privatization-item">
                            <div class="privatization-title">{{ item.title }}</div>
                            <div v-for="(ele, i) in item.descList" :key="i" class="privatization-desc-item">
                                <img src="" alt="">
                                <div class="privatization-desc">{{ ele.desc }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contactInfo">
            <div class="contactInfo-inner w1200">
                <h2 class="contactInfo-title">专注驾培行业数据化转型解决方案服务商</h2>
                <div class="contactInfo-actions">
                    <div class="consult-btn" @click="showConsult = true">立即咨询</div>

                </div>
                <div class="contactInfo-desc">电话咨询：134-7688-3427</div>
            </div>
        </div>
        <consult v-if="showConsult" @close="showConsult = false" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import consult from '@/components/consult.vue';

const toFreeSignup = () => {
    window.open('https://www.lutongjiakao.com/admin/#/register')
}

const showConsult = ref(false);
const dataList = ref([
    { icon: 'https://image.lutongjiakao.com/system/44586bd6f8464fffaa89684b9b04b86a.png', title: '招生营销服务', content: '打破传统驾校束缚，实现高效拉新；从招生引流到成交转化，让市场招生更简单' },
    { icon: 'https://image.lutongjiakao.com/system/4df4797b68b94e99b1451c11ee7556b8.png', title: '驾校展示服务', content: '公众号+小程序+H5+PC等多渠道曝光，快速打造私域独立IP，让品牌更加便捷传播' },
    { icon: 'https://image.lutongjiakao.com/system/9a11e3dbaa5542cc9061f5a33dcd7970.png', title: '学员管理服务', content: '30秒快速完成报名建档，自动关联学员缴费、培训、成绩、学时信息，学员受理状态、成绩、约考、取消约考信息一键同步，无需逐一查询' },
    { icon: 'https://image.lutongjiakao.com/system/ebfde66e9d60469bba3c311ffd69df53.png', title: '运营分析服务', content: '日常经营数据随时掌握，关键流程随时决策；多维度合格率分析，考试情况直观展示' },
    { icon: 'https://image.lutongjiakao.com/system/123729ae74d444c0836a15e2896d1b57.png', title: '财务管理服务', content: '智能财务管理，实现学费快速安全收款、精准业务支出管理，实时欠交学费查询预警，严谨财务流程审核。' }
])

const featuresList = [
    { id: 1, title: '便捷易用', description: '全平台支持，无需下载，网页开启，注册即用', icon: 'https://image.lutongjiakao.com/system/59e306811af24f3281141bd91974e327.png' },
    { id: 2, title: '信息互通', description: '模考成绩、学时信息、模拟器、路考仪等学员信息互通', icon: 'https://image.lutongjiakao.com/system/4df4797b68b94e99b1451c11ee7556b8.png' },
    { id: 3, title: '数据实时', description: '数据实时在线更新，随时获取最新的经营情况', icon: 'https://image.lutongjiakao.com/system/9a11e3dbaa5542cc9061f5a33dcd7970.png' },
    { id: 4, title: '安全保障', description: '采用数据加密存储技术，保证数据安全性和隐私性', icon: 'https://image.lutongjiakao.com/system/ebfde66e9d60469bba3c311ffd69df53.png' },
    { id: 5, title: '高适应度', description: '适应集团驾校、联盟驾校、挂靠不同经营模式', icon: 'https://image.lutongjiakao.com/system/123729ae74d444c0836a15e2896d1b57.png' },
    { id: 6, title: '快速迭代', description: '围绕场景需求，定期更新维护，快速迭代升级产品', icon: 'https://image.lutongjiakao.com/system/9ac03dc633204569bc633ce09846f083.png' },
    { id: 7, title: '100+功能', description: '功能全面，简单好用，自定义功能，适用各种场景', icon: 'https://image.lutongjiakao.com/system/08e0ec73305441a0808bda1dbd63b400.png' },
    { id: 8, title: '服务保障', description: '7*24小时不间断监测维护系统，智能运维流程', icon: 'https://image.lutongjiakao.com/system/61d5dd29f99a4b6ba92bad5ddbfd9d77.png' }
];

const serviceSteps = ref([
    {
        no: '01',
        title: '需求沟通',
        desc: '全面了解客户需求，深入了解客户使用场景，梳理业务流程。',
        icon: 'https://image.lutongjiakao.com/system/9ac03dc633204569bc633ce09846f083.png'
    },
    {
        no: '02',
        title: '确定方案',
        desc: '进行专业技术咨询与沟通，提供最优的数字化解决方案。',
        icon: 'https://image.lutongjiakao.com/system/08e0ec73305441a0808bda1dbd63b400.png'
    },
    {
        no: '03',
        title: '高效部署',
        desc: '帮助客户推动项目上线，完成初始化配置、组织架构搭建、系统培训等，保证系统高效使用。',
        icon: 'https://image.lutongjiakao.com/system/61d5dd29f99a4b6ba92bad5ddbfd9d77.png'
    },
    {
        no: '04',
        title: '售后服务',
        desc: '专属售后服务群，真实人工在线7*12小时实时响应， 不间断不定时客户维护关怀。',
        icon: 'https://image.lutongjiakao.com/system/b5757f75a3a449b38b89280aa65be65a.png'
    }
]);

const deployList = ref([
    {
        title: '系统架构',
        descList: [
            { desc: '后端采用Java springBoot框架' },
            { desc: '前端采用vue3 + uniapp框架' },
            { desc: '采用redis+kafka分布式数据处理' },
            { desc: '采用七牛云存储方式' },
            { desc: '腾讯云、阿里云高性能云服务器' }
        ]
    },
    {
        title: '数据安全',
        descList: [
            { desc: '驾校独立数据库，确保隐私安全。' },
            { desc: '存储加密，隐私加密，杜绝数据泄露。' },
            { desc: '腾讯云存储服务用户数据的备份和恢复' }
        ]
    },
    {
        title: '用户培训',
        descList: [
            { desc: '系统搭建' },
            { desc: '微信小程序账号协助申请' },
            { desc: '微信公众号协助申请' },
            { desc: '微信支付协助申请' },
            { desc: '驾校数据配置' },
            { desc: '后台功能讲解' }
        ]
    },
    {
        title: '售后服务',
        descList: [
            { desc: '专属售后服务群' },
            { desc: '7*24小时人工在线' },
            { desc: '技术团队快速响应' },
            { desc: '不定时线下回访' },
            { desc: '产品迭代更新' },
            { desc: '个性化定制服务' }
        ]
    }
])

const advantageList = ref([
    {
        img: 'https://image.lutongjiakao.com/system/1605fe8584a94850bc5805434578a7e6.png',
        desc: '首页DIY装修'
    },
    {
        img: 'https://image.lutongjiakao.com/system/918d1b46728d46a88d52475fc1ed2ed3.png',
        desc: '刷题页DIY装修'
    },
    {
        img: 'https://image.lutongjiakao.com/system/764dbd39792e44fa87004b31565496f1.png',
        desc: '个人中心DIY装修'
    },
    {
        img: 'https://image.lutongjiakao.com/system/1b123cc4a80749b6883bf02e81cc7289.png',
        desc: 'PC端DIY装修'
    }
])
const operationList = ref([
    {
        img: 'https://image.lutongjiakao.com/system/1605fe8584a94850bc5805434578a7e6.png',
        desc: '数据分析'
    },
    {
        img: 'https://image.lutongjiakao.com/system/918d1b46728d46a88d52475fc1ed2ed3.png',
        desc: '用户管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/764dbd39792e44fa87004b31565496f1.png',
        desc: '自定义题库'
    },
    {
        img: 'https://image.lutongjiakao.com/system/1b123cc4a80749b6883bf02e81cc7289.png',
        desc: '员工管理'
    }
])
const marketingList = ref([
    {
        img: 'https://image.lutongjiakao.com/system/1605fe8584a94850bc5805434578a7e6.png',
        desc: '兑换码'
    },
    {
        img: 'https://image.lutongjiakao.com/system/918d1b46728d46a88d52475fc1ed2ed3.png',
        desc: '新客专享'
    },
    {
        img: 'https://image.lutongjiakao.com/system/764dbd39792e44fa87004b31565496f1.png',
        desc: '陪练服务'
    },
    {
        img: 'https://image.lutongjiakao.com/system/1b123cc4a80749b6883bf02e81cc7289.png',
        desc: '优惠券'
    }
])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.dhJzOy {
    background-image: url('https://image.lutongjiakao.com/system/7b82d7dd2a9b424ba230f04f034c3b32.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: rem(515);
    // position: relative;
    padding-top: rem(150);

    .private-header {
        /* 垂直居中内容 */
        display: flex;
        flex-direction: column;
        // justify-content: center;
        // align-items: flex-start;
        // margin-top: rem(200);
        height: rem(515);
    }

    .private-header-type {
        width: rem(97);
        font-weight: 500;
        font-size: rem(13);
        background: linear-gradient(90deg, rgb(17, 200, 113) 0%, rgb(66, 175, 215) 100%) text;
        color: transparent;
    }

    .private-header-title {
        color: rgb(33, 33, 33);
        margin: rem(10) 0px;
        font-size: rem(36);
        font-weight: 700;
    }

    .private-header-desc {
        font-size: rem(12);
        color: rgb(89, 89, 89);
        margin-top: rem(10);
    }

    .private-button {
        display: flex;
        align-items: center;
        gap: rem(20);
        margin-top: rem(30);
    }

    .download-button,
    .buy-button {
        width: rem(108);
        height: rem(33);
        font-size: rem(11);
        border-radius: rem(4);
        text-align: center;
        line-height: rem(33);
        cursor: pointer;
    }

    .download-button {
        color: rgb(255, 255, 255);
        background: rgb(17, 200, 113);
    }

    .buy-button {
        border: 1px solid rgb(17, 200, 113);
        color: rgb(17, 200, 113);
    }
}

.cpbIhp {
    height: rem(600);
    padding: rem(80) 0;
    background: linear-gradient(rgb(255, 255, 255) 0%, rgb(242, 234, 248) 50%, rgb(255, 255, 255) 100%);
}

.ad-title {
    margin: 0 0 rem(26);
    font-size: rem(30);
    font-weight: 700;
    line-height: 1.5;
    color: rgb(31, 35, 41);
    text-align: center;
}


.deploy {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: rem(20);

    .deploy-item {
        width: rem(270);
        padding: rem(23) rem(15);
        background: rgb(255, 255, 255);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        border: 1px solid rgb(255, 255, 255);
    }

    .deploy-desc {
        font-size: rem(10);
        color: rgb(88, 101, 113);
        line-height: 1.5;
        text-align: center;
    }

    .icon-img {
        width: rem(44);
        height: rem(44);
    }

    .deploy-title {
        font-size: rem(16);
        margin: rem(12) auto rem(6);
        color: rgb(33, 33, 33);
        font-weight: 700;
        line-height: 1.5;
    }
}

.features-section {
    .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        // gap: 0;
        row-gap: rem(20);
        border: 2px solid #fff;
        border-radius: rem(12);
        overflow: hidden;
        // background: linear-gradient(180deg, #f7f9fd, #e2ecfb);
        backdrop-filter: blur(20px);

        .feature-card {
            padding: rem(16);
            display: flex;
            flex-direction: column;
            align-items: center;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
            height: rem(135);
            // background: #f7f9fd;

            &:nth-child(4n) {
                border-right: none;
            }

            &:nth-child(n+5) {
                border-bottom: none;
            }

            &:hover {
                // background: linear-gradient(120deg, #e3eafe 0%, #f0f4ff 100%);
                background: rgba(216, 245, 234, 0.6);

                .feature-title {
                    color: rgb(37, 207, 107);
                }
            }

            .feature-icon {
                width: rem(35);
                height: rem(35);
                // background: rgb(15, 210, 183);
                // display: flex;
                // align-items: center;
                // justify-content: center;
                // color: white;
                // font-size: rem(16);
                margin-bottom: rem(10);

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .feature-title {
                font-size: rem(16);
                font-weight: 700;
                color: #000;
                margin: 0 0 rem(5) 0;
                line-height: 1.2;
            }
        }

        .feature-desc {
            font-size: rem(10);
            color: #666;
            line-height: 1.3;
            text-align: center;
            margin: rem(8) 0 0 0;
        }
    }
}

.discover {
    width: 100%;
    padding: rem(100) 0px;
    // background: url('https://image.lutongjiakao.com/system/1f56138c9b244b5e85392296c1b94573.png') center top / 100% no-repeat;
    background: #fff;
}

.service {
    // background: linear-gradient(rgba(112, 197, 244, 0.3) 0%, rgb(226, 255, 255) 100%);
    background: linear-gradient(rgb(255, 255, 255) 1.56%, rgba(255, 255, 255, 0) 26.12%), linear-gradient(90deg, rgba(216, 245, 234, 0.6) 0%, rgba(241, 249, 253, 0.6) 51.84%, rgba(219, 240, 255, 0.6) 99.69%);
    width: 100%;
    // height: rem(420);
    padding: 0 0 rem(50);

    .service-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: rem(10);
        margin-top: rem(50);

        .step-card {
            width: rem(250);
            height: 100%;
            background: linear-gradient(rgba(255, 255, 255, 0.8) 37.82%, rgba(255, 255, 255, 0.3) 100%);
            border-radius: rem(6);
            padding: rem(16);
            display: flex;
            flex-direction: column;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
        }

        .step-icon {
            width: rem(28);
            height: rem(28);
            margin-bottom: rem(8);
        }

        .step-title {
            font-size: rem(16);
            font-weight: 700;
            color: #1f2329;
            display: flex;
            align-items: center;
            gap: rem(5);
            margin: rem(8) 0 rem(10);
        }

        .step-no {
            color: rgb(37, 207, 107);
        }

        .step-desc {
            font-size: rem(11);
            color: #586571;
            line-height: 1.5;
        }

        .step-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .service-cta {
        margin-top: rem(50);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: rem(20);

        .consult-btn {
            padding: rem(6) rem(30);
            background: rgb(37, 207, 107);
            color: #fff;
            border: none;
            border-radius: rem(4);
            cursor: pointer;
            font-size: rem(12);
        }
    }
}

.privatization {
    // background: linear-gradient(rgb(255, 255, 255) 0%, rgb(242, 234, 248) 50%, rgb(255, 255, 255) 100%);
    background: #fff;
    height: rem(571.5);
    position: relative;
    padding: 0 0 rem(50);

    .deploy-bg {
        // position: absolute;
        // top: 0px;
        // left: 0px;
        width: 100%;
        height: rem(270);
        // background: url('https://image.lutongjiakao.com/system/a43c11776e84493c900e73479883c86d.png') center top / 100% no-repeat;
    }

    .privatization-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: rem(15);

        .privatization-item {
            padding: rem(20) rem(20) rem(25);
            background-color: #fff;
            border-radius: rem(6);
            height: rem(350);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);

            .privatization-title {
                font-size: rem(14);
                color: rgb(31, 35, 41);
                font-weight: bold;
            }

            .privatization-desc-item {
                display: grid;
                gap: rem(15);

                .privatization-desc {
                    font-size: rem(11);
                    color: rgb(62, 80, 96);
                    display: flex;
                    // align-items: center;

                    &::before {
                        content: "";
                        display: inline-block; // 显示为内联块，避免被文字遮挡
                        flex-shrink: 0; // 防止图标被压缩
                        width: rem(12);
                        height: rem(12);
                        margin-right: rem(8);
                        margin-top: rem(2);
                        background-image: url('');
                        background-repeat: no-repeat;
                        background-size: contain; // 保证图标完整显示
                        vertical-align: middle; // 垂直居中
                    }
                }
            }
        }
    }
}

.contactInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: rem(47) 0px rem(27);
    color: rgb(255, 255, 255);
    text-align: center;
    // background: radial-gradient(100% 711.11% at 100% 13.51%, rgb(85, 188, 238) 0%, rgb(68, 95, 255) 100%);
    background: radial-gradient(100% 711.11% at 100% 13.51%, rgb(17, 200, 178) 0%, rgb(17, 200, 113) 100%);

    .contactInfo-title {
        font-size: rem(35);
        color: #fff;
    }

    .contactInfo-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: rem(15);
        margin: rem(20) 0;
    }

    .consult-btn {
        padding: rem(6) rem(30);
        background: #fff;
        color: rgb(37, 207, 107);
        border: none;
        border-radius: rem(4);
        cursor: pointer;
        font-size: rem(12);
    }

    .contactInfo-desc {
        font-size: rem(12);
        margin-top: rem(15);
    }
}

.ad-desc {
    margin: rem(-20) 0 rem(50);
    font-size: rem(12);
    color: rgb(135, 135, 135);
    text-align: center;
}

.qrcode {
    width: rem(150);
    height: rem(150);
    background: #fff;
    padding: rem(6);
    border-radius: rem(8);
}

.privatization-content {
    position: absolute;
    top: rem(70);
    left: 50%;
    transform: translateX(-50%);
}

.advantage-detail {

    .advantage-item:first-child {
        margin-top: 0;
    }
}

.advantage-item {
    display: flex;
    gap: rem(100);
    margin-top: rem(100);
}

.advantage-item-img {
    width: rem(434);
    height: rem(300);

    img {
        width: 100%;
        height: 100%;
    }
}

.advantage-item-content {
    width: calc(rem(900) - rem(434) - rem(100));
}

.advantage-item-title {
    font-size: rem(30);
    color: #000;
    font-weight: 700;

    span {
        color: rgb(10, 188, 84);
    }
}

.advantage-item-desc {
    margin: rem(20) 0 rem(10);
    font-size: rem(14);
    color: #000;
    font-weight: bold;
}

.advantage-item-remark {
    font-size: rem(14);
    color: rgb(102, 102, 102);
    margin-top: rem(20);
}

.advantage-box {
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
    margin-top: rem(25);
}

.advantage-box-item {
    font-size: rem(14);
    color: rgb(102, 102, 102);
    font-weight: 400;
    box-sizing: border-box;
    flex: 0 0 50%;
    margin: rem(5) 0;

    &::before {
        content: "";
        display: inline-block;
        width: rem(13.5);
        height: rem(10);
        margin-right: rem(8);
        color: rgb(10, 188, 84);
        background-image: url('https://image.lutongjiakao.com/system/8a42442193794c5d9fd74266ac79541c.png');
        background-repeat: no-repeat;
    }
}

.advantage-type {
    width: rem(405);
    height: auto;
    background: rgb(242, 251, 247);
    border-radius: rem(8);
    font-size: rem(12);
    color: rgb(102, 102, 102);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: rem(15) 0;
    margin-top: rem(20);
}

.advantage-img {
    width: rem(31.5);
    height: rem(31.5);

    img {
        width: 100%;
        height: 100%;
    }
}

.advantage-desc {
    margin-top: rem(10);
}
</style>